<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>xeokit visual test</title>
    <link href="css/pageStyle.css" rel="stylesheet" />
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>

  <script type="module">
    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
      Viewer,
      SceneModel,
      math,
      SectionPlanesPlugin,
    } from "../../dist/xeokit-sdk.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
      canvasId: "myCanvas",
      transparent: true,
      dtxEnabled: true, // Enable data texture model representation
    });

    viewer.scene.camera.eye = [-21.8, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    //-----------------------------------------------------------
    // Create several origin points
    //-----------------------------------------------------------

    //const OFFSET = 1000000000.0;
    const OFFSET = 40.0;

    const origins = [
      [0, 0, 0],
      [OFFSET, 0, 0],
      [0, 0, OFFSET],
      [OFFSET, 0, OFFSET],
    ];

    //-----------------------------------------------------------
    // Create a simple table model
    // at each of our origins. This will result in several
    // tables, positioned apart from each other.
    //-----------------------------------------------------------

    const sceneModel = new SceneModel(viewer.scene, {
      id: "tables",
      isModel: true,
      scale: [1, 1, 1],
      rotation: [0, 0, 0],
      edges: true,
      dtxEnabled: true,
    });

    for (let i = 0, len = origins.length; i < len; i++) {
      buildTable(sceneModel, origins[i]);
    }

    sceneModel.finalize();

    viewer.cameraFlight.jumpTo(viewer.scene);

    //------------------------------------------------------------------------------------------------------------------
    // Create a moving SectionPlane, that moves through the table models
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new SectionPlanesPlugin(viewer, {
      overviewCanvasId: "mySectionPlanesOverviewCanvas",
      overviewVisible: true,
    });

    const sectionPlane = sectionPlanes.createSectionPlane({
      id: "mySectionPlane",
      pos: [origins[0][0] - 10, -10, origins[0][2] - 10],
      dir: math.normalizeVec3([1.0, 0.01, 1]),
    });

    sectionPlanes.showControl(sectionPlane.id);

    let i = 0;
    viewer.scene.on("tick", () => {
      sectionPlane.pos = [
        sectionPlane.pos[0] + i,
        sectionPlane.pos[1],
        sectionPlane.pos[2] + i,
      ];
      i += 0.001;
    });

    //------------------------------------------------------------------------------------------------------------------
    // Flies camera to the specified origin
    //------------------------------------------------------------------------------------------------------------------

    window.gotoRTCCenter = function (i) {
      const origin = origins[i];

      if (!origin) {
        return;
      }

      viewer.cameraFlight.flyTo({
        eye: [origin[0], 0, origin[2] - 10],
        look: origin,
        up: [0, 1, 0],
      });
    };

    //------------------------------------------------------------------------------------------------------------------
    // Creates a simple table-shaped model with the given SceneModel,
    // without reusing geometry, and centered at the given origin
    //------------------------------------------------------------------------------------------------------------------

    function buildTable(sceneModel, origin) {
      let meshId = math.createUUID();

      sceneModel.createMesh({
        id: meshId,
        origin: origin, // This mesh's positions and transforms are relative to the origin
        primitive: "triangles",
        positions: [
          1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1,
          1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1,
          -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
          -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1,
        ],
        normals: [
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
          -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1,
          0, 0, -1, 0, 0, -1,
        ],
        indices: [
          0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14,
          12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
        ],
        position: [-4, -6, -4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [1, 0.3, 0.3],
      });

      sceneModel.createEntity({
        meshIds: [meshId],
        isObject: true,
      });

      meshId = math.createUUID();

      sceneModel.createMesh({
        id: meshId,
        origin: origin,
        primitive: "triangles",
        positions: [
          1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1,
          1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1,
          -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
          -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1,
        ],
        normals: [
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
          -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1,
          0, 0, -1, 0, 0, -1,
        ],
        indices: [
          0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14,
          12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
        ],
        position: [4, -6, -4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [0.3, 1.0, 0.3],
      });

      sceneModel.createEntity({
        meshIds: [meshId],
        isObject: true,
      });

      meshId = math.createUUID();

      sceneModel.createMesh({
        id: meshId,
        origin: origin,
        positions: [
          1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1,
          1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1,
          -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
          -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1,
        ],
        normals: [
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
          -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1,
          0, 0, -1, 0, 0, -1,
        ],
        indices: [
          0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14,
          12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
        ],
        position: [4, -6, 4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [0.3, 0.3, 1.0],
      });

      sceneModel.createEntity({
        meshIds: [meshId],
        isObject: true,
      });

      meshId = math.createUUID();

      sceneModel.createMesh({
        id: meshId,
        origin: origin,
        positions: [
          1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1,
          1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1,
          -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
          -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1,
        ],
        normals: [
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
          -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1,
          0, 0, -1, 0, 0, -1,
        ],
        indices: [
          0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14,
          12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
        ],
        position: [-4, -6, 4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [1.0, 1.0, 0.0],
      });

      sceneModel.createEntity({
        meshIds: [meshId],
        isObject: true,
      });

      meshId = math.createUUID();

      sceneModel.createMesh({
        id: meshId,
        origin: origin,
        positions: [
          1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1,
          1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1,
          -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
          -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1,
        ],
        normals: [
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
          0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
          -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1,
          0, 0, -1, 0, 0, -1,
        ],
        indices: [
          0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14,
          12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
        ],
        position: [0, -3, 0],
        scale: [6, 0.5, 6],
        rotation: [0, 0, 0],
        color: [1.0, 0.3, 1.0],
      });

      sceneModel.createEntity({
        meshIds: [meshId],
        isObject: true,
      });
    }
    signalTestComplete(viewer);
  </script>
</html>
